<template>
  <div id="app">
    <div id="nav">
      <!--      <router-link to="/news" active-class="current">首页</router-link>-->
      <!--      <router-link to="/mine" active-class="current">我的</router-link>-->
      <router-link to="/home">首页</router-link>
      <router-link to="/mine">我的</router-link>
      <router-link to="/news/001">新闻</router-link>
      <router-link :to="{path:'/circle',query:{name:'abc',age:10}}">圈子</router-link>
      <br/>
      <button @click="toHome">首页</button>
      <button @click="toMine">我的</button>
      <button @click="toNews">新闻</button>
      <button @click="toCircle">圈子</button>

    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import {useRouter} from 'vue-router'

export default {

  setup() {

    const router = useRouter()
    const toHome = () => {
      router.push('/news')
    }
    const toMine = () => {
      router.push('/mine')
    }
    const toNews = () => {
      router.push('/news/Dynamic—js')
    }
    const toCircle = () => {
      router.push({
        path:'/circle',
        query:{
          id:1,
          name:"abc"
        }
      })
    }

    return {
      toMine,
      toHome,
      toNews,
      toCircle
    }

  }

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.current {
  background: #308ce8;
  color: white;
}

/*默认样式类*/
.router-link-active {
  background: burlywood;
  color: goldenrod;
}
</style>
